<!--
 * @Author: wuzhen
 * @Date: 2020-01-15 09:47:12
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-15 14:40:09
 * @Description: 右键菜单
 -->
<template>
  <ul
    class="context-menu"
    :style="{ left: `${left}px`, top: `${top}px` }"
    v-click-outside="() => $emit('on-close')"
  >
    <li
      v-for="(item, index) in contextMenu"
      :key="index"
      @click="$emit('on-click', item.value)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    contextMenu: {
      type: Array,
      default: () => []
    },
    left: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="less" scoped>
.context-menu {
  width: 115px;
  background: #fff;
  position: fixed;
  z-index: 100;
  left: 177px;
  top: 337px;
  list-style: none;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  li {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
    cursor: pointer;
    &:last-child {
      border: none;
    }
  }
}
</style>
